<template>
  <div>
    <el-card class="aaa">
      <div class="header">
        {{ $route.query.atteDate }}月人事报表
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="考勤统计" name="first">
          <el-row type="flex" justify="end">
            <el-button type="primary" @click="derive">导出</el-button>
          </el-row>
          <el-row>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="name"
                label="姓名"
                width="180"
              />
              <el-table-column
                prop="workNumber"
                label="工号"
                width="180"
              />
              <el-table-column
                prop="mobile"
                label="手机号"
              />
              <el-table-column
                prop="department"
                label="部门"
              />
              <el-table-column
                prop="leaveDays"
                label="事假"
              />
              <el-table-column
                prop="dayOffLeaveDays"
                label="调休"
              />
              <el-table-column
                prop="normalDays"
                label="正常"
              />
              <el-table-column
                prop="laterTimes"
                label="迟到次数"
              />
              <el-table-column
                prop="earlyTimes"
                label="早退次数"
              />
              <el-table-column
                prop="hoursPerDays"
                label="日均时长"
              />
              <el-table-column
                prop="absenceDays"
                label="旷工天数"
              />
              <el-table-column
                prop="isFullAttendanceint"
                label="是否全勤"
              />
              <el-table-column
                prop="actualAtteOfficialDays"
                label="实际出勤天数"
              />
              <el-table-column
                prop="actualAtteUnofficialDays"
                label="应出勤天数"
              />
              <el-table-column
                prop="salaryStandards"
                label="计薪标准"
              />
              <el-table-column
                prop="salaryOfficialDays"
                label="计薪天数"
              />
            </el-table>
          </el-row>
          <el-row type="flex" justify="center">
            <el-button type="primary" @click="pigeonhole">归档 {{ $route.query.atteDate }} 报表</el-button>
            <el-button type="primary" @click="newconstruction">新建报表</el-button>
          </el-row>
        </el-tab-pane>
      </el-tabs>

    </el-card>
  </div>

</template>

<script>
import { getmouthstatement, pigeonhole } from '@/api/approvals'
export default {
  data() {
    return {
      activeName: 'first',
      tableData: [],
      atteDate: ''
    }
  },
  created() {
    // 渲染页面
    this.getmouthstatement()
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    async getmouthstatement() {
      // console.log(this.$route.query)
      const atteDate = this.$route.query.atteDate
      this.atteDate = atteDate
      const res = await getmouthstatement({ 'atteDate': atteDate })
      console.log(res)
      this.tableData = res
    },
    // 新建报表
    async  newconstruction() {
      await this.$confirm('您确认新建报表吗？新建成功后,已归档数据不可修改')
      let time = this.getNextMonth()
      // this.atteDate = time
      time = Number(time.substr(4))
      await this.$router.push({ path: 'attendances', query: { 'newmouth': time }})
    },
    // 导出
    derive() {

    },
    // 归档
    async pigeonhole() {
      await this.$confirm('您确认归档该月报表吗')
      this.$message.success('归档成功')
      await pigeonhole()
    },
    getNextMonth() {
      const year = this.atteDate.substring(0, 4)
      const month = this.atteDate.slice(4)
      //   console.log(year, month)

      let year2 = year
      let month2 = parseInt(month) + 1
      if (month2 === 13) {
        year2 = parseInt(year2) + 1
        month2 = 1
      }
      if (month2 < 10) {
        month2 = '0' + month2
      }
      const t2 = year2 + month2
      return t2
    }

  }

}
</script>

<style lang="scss" scoped>
.aaa{
  margin: 20px;
}
.header{
  text-align: center;
  font-size: 400;
}

</style>
